<script setup lang="ts" name="404"></script>

<template>
	<div class="flex-c h-[640px]">
		<svg-icon className="test" icon="404"></svg-icon>
		<div class="ml-12">
			<p
				class="font-medium text-4xl mb-4 dark:text-white"
				v-motion
				:initial="{
					opacity: 0,
					y: 100,
				}"
				:enter="{
					opacity: 1,
					y: 0,
					transition: {
						delay: 100,
					},
				}"
			>
				404
			</p>
			<p
				class="mb-4 text-gray-500"
				v-motion
				:initial="{
					opacity: 0,
					y: 100,
				}"
				:enter="{
					opacity: 1,
					y: 0,
					transition: {
						delay: 300,
					},
				}"
			>
				抱歉，你访问的页面不存在
			</p>
			<el-button
				type="primary"
				@click="$router.push('/')"
				v-motion
				:initial="{
					opacity: 0,
					y: 100,
				}"
				:enter="{
					opacity: 1,
					y: 0,
					transition: {
						delay: 500,
					},
				}"
			>
				返回首页
			</el-button>
		</div>
	</div>
</template>
